<template>
  <view>
    <uni-navbar :title="'报道列表'"></uni-navbar>

    <!-- 筛选 -->
    <view class="shaixuan">
      <view class="s-search">
        <u-search v-model="keywords" input-align="left" placeholder="搜索客户姓名或者电话" height="50"></u-search>
      </view>
      <view class="s-s" @click="show = true">
        <image src="../../../static/application/qici/shaixuan.png" mode=""></image>筛选
      </view>
    </view>
    <!-- 弹出层 -->
    <u-popup v-model="show" mode="top" length="90%">
      <view>
        <uni-navbar :title="'报道列表'"></uni-navbar>
        <div class="tanchu">
          <ul class="tanchu-one">
            <li>
              <span>课程分类</span>
              <span>执业医师></span>
            </li>
            <li>
              <span>期次筛选</span>
              <span>全部></span>
            </li>
            <li>
              <span>分类</span>
              <span>全部></span>
            </li>
          </ul>
          <view class="tanchu-two">
            <div v-for="(item,index) in lite" :key="index">
              <span>{{item.name}}</span>
              <ul>
                <li @click="dianji(index,inde,item)" :class="item.indexlength==inde?'hiuse bule':'hiuse'"
                  v-for="(ite,inde) in item.text" :key="index">{{ite}}</li>
              </ul>
            </div>
          </view>
          <div class="tanchu-three">
            <view>重置</view>
            <view @click="xiaos">确定</view>
          </div>
        </div>
      </view>
    </u-popup>
    <view class="r-title">
      当前删选：执业医师
    </view>

    <view class="block" v-for="(item,index) in 3" :key="index">
      <view class="b-1">
        <view>张三 15246474859</view>
        <view>杭州第二期（江浙沪校区）</view>
      </view>
      <view class="b-2">
        2022备考全程班-执业-杭州
      </view>
      <view class="b-3">
        <view>报道状态：已报道</view>
        <view>付款状态:未结清</view>
      </view>
      <view class="b-3">
        <view>押金：未交付</view>
        <view>物料:未领取已领取</view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        lite: [{
            name: '报道状态',
            text: ['全部', '未报到', '已报到', '不来', '不来', '已退费'],
            indexlength: 0,
          },
          {
            name: '付款状态',
            text: ['全部', '未报到12', '已报到', '不来', '不来', '已退费'],
            indexlength: 0,
          },
          {
            name: '押金',
            text: ['全部', '未报到13', '已报到', '不来', '不来', '已退费'],
            indexlength: 0,
          },
          {
            name: '报道状态',
            text: ['全部', '未报到14', '已报到', '不来', '不来', '已退费'],
            indexlength: 0,
          },
        ],
        inexlen:0
      }
    },
    methods: {
      dianji(index, inde) {
        this.inexlen=index
        if(this.inexlen==index){
          this.lite[index].indexlength = inde
        }
      },
      xiaos(){
        this.show=false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shaixuan {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 20rpx;

    .s-search {
      width: 600rpx;
    }

    .s-s {
      line-height: 54rpx;
      color: #999999;

      image {
        width: 28rpx;
        height: 26rpx;
        margin-right: 6rpx;
      }
    }
  }

  .r-title {
    width: 750rpx;
    height: 60rpx;
    background: #CFE7FF;
    font-size: 24rpx;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #008EFE;
    line-height: 60rpx;
    padding-left: 30rpx;
  }

  .block {
    width: 750rpx;
    padding: 20rpx 30rpx;
    background-color: #fff;
    line-height: 60rpx;
    border-bottom: 1rpx solid #e8e8e8;

    .b-1 {
      font-size: 26rpx;
      font-family: Source Han Sans SC;
      font-weight: 500;
      display: flex;
      justify-content: space-between;

      view:nth-child(1) {
        color: #4D4D4D;
      }

      view:nth-child(2) {
        color: #008EFE;
      }
    }

    .b-2 {
      font-size: 26rpx;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
      line-height: 50rpx;
    }

    .b-3 {
      font-size: 26rpx;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
      display: flex;

      view {
        width: 300rpx;
      }
    }
  }

  .tanchu {
    .tanchu-one {
      li {
        border-bottom: 2rpx solid #F2F2F2;
        display: flex;
        padding: 20rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
        justify-content: space-between;

        span:nth-child(1) {
          font-size: 24rpx;
          font-weight: 400;
          color: #4D4D4D;
        }

        span:nth-child(2) {
          font-size: 24rpx;
          font-weight: 400;
          color: #4C4C4C;
        }
      }
    }

    .tanchu-two {
      padding-left: 30rpx;
      padding-right: 30rpx;

      div {
        margin-top: 30rpx;

        span {
          display: block;
          font-size: 26rpx;
          font-weight: 400;
          color: #4D4D4D;
        }

        ul {
          .hiuse {
            margin-top: 20rpx;
            width: 115rpx;
            height: 54rpx;
            background-color: #F2F2F2;
            text-align: center;
            line-height: 54rpx;
            font-size: 24rpx;
            color: #4D4D4D;
            display: inline-block;
            border-radius: 8rpx;
            margin-right: 20rpx;
          }

          .bule {
            background-color: #409EFE;
            color: #fff;
          }
        }
      }
    }
    .tanchu-three{
      margin-top: 60rpx;
      margin-bottom: 60rpx;
      padding-left: 142rpx;
      padding-right: 142rpx;
      display: flex;
      justify-content: space-between;
      view{
        border-radius: 8rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 65rpx;
        width: 197rpx;
        height: 65rpx;
        text-align: center;
      }
      view:nth-child(1){
        background: #B3B3B3;
      }
      view:nth-child(2){
        background: #0590FE;
      }
    }
  }
</style>
